<template>
	<div style="display: inline-block;">
		<typeGroup :name="data.name" @edit="showEdit()" @delete="deleteRow()">
			<groupInputDetail :data="props.data" @change="changeValue"></groupInputDetail>
	  </typeGroup>

	  <el-dialog
	    v-model="dialog.visible"
	    width="1000px"
	    draggable>
	    <template #header>
	    	<div style="color: #fff">输入框配置</div>
	    </template>
	    <el-form label-width="12em">
	    	<el-row style="margin-bottom:18px;" :gutter="20">
	    		<el-col :span="12">
	    			<el-form-item label="输入框Key：">
			    		<el-input v-model="dialog.form.key" placeholder="请输入"/>
			    	</el-form-item>
	    		</el-col>
	    		<el-col :span="12">
	    			<el-form-item label="输入框类型：">
			    		<el-select v-model="dialog.form.type" placeholder="请选择" style="width: 240px">
						    <el-option
						      v-for="item in INPUT_TYPE"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value"/>
						  </el-select>
			    	</el-form-item>
	    		</el-col>
	    	</el-row>
	    	<el-form-item label="输入框样式：">
	    		<el-input v-model="dialog.form.style" type="textarea" :rows="5" placeholder="请输入"/>
	    	</el-form-item>
	    	<el-form-item label="输入框验证规则：">
	    		<el-select v-model="dialog.form.checkType" placeholder="请选择" clearable style="width: 240px">
				    <el-option
				      v-for="item in CHECK_TYPE"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value"/>
				  </el-select>
	    	</el-form-item>
	    	<el-form-item v-show="dialog.form.checkType == 'function'" label="自定义验证规则：">
	    		<wordFunctionEditor v-model="dialog.form.checkFunction"></wordFunctionEditor>
	    	</el-form-item>
	    	<el-form-item label="onMounted：">
	    		<wordFunctionEditor v-model="dialog.form.onMounted"></wordFunctionEditor>
	    	</el-form-item>
	    	<el-form-item label="onChange：">
	    		<wordFunctionEditor v-model="dialog.form.onChange"></wordFunctionEditor>
	    	</el-form-item>
	    </el-form>
	    <template #footer>
	      <span class="dialog-footer">
	        <el-button @click="dialog.visible = false">关闭</el-button>
	        <el-button type="primary" @click="saveData()">确定</el-button>
	      </span>
	    </template>
	  </el-dialog>
	</div>
	  
</template>

<script setup>
	import { reactive, ref, onMounted } from 'vue'
	import typeGroup from "./type-group.vue";
	import groupInputDetail from "./group-input-detail.vue";
	import wordFunctionEditor from "./wordFunctionEditor.vue";
	import {TRANS_STYLE, INPUT_TYPE, CHECK_TYPE} from "../components.js";

	const emits = defineEmits(['delete', 'change']);
	const props = defineProps({
		data: {
			type: Object,
			default: () => ({})
		}
	})

	const _d = reactive({
		value: ''
	})

	const dialog = reactive({
		visible: false,
		form: {
			key: '',
			style: '',
		}
	})
	
	onMounted(() => {
	
	})

	function showEdit() {
		dialog.form.key = props.data.attr.key;
		dialog.form.type = props.data.attr.type;
		dialog.form.style = TRANS_STYLE.jsonToString(props.data.attr.style);
		dialog.form.onMounted = props.data.attr.onMounted;
		dialog.form.onChange = props.data.attr.onChange;
		dialog.visible = true;
	}

	function saveData() {
		let data = JSON.parse(JSON.stringify(props.data));
		data.attr.key = dialog.form.key;
		data.attr.type = dialog.form.type;
		data.attr.style = TRANS_STYLE.stringToJson(dialog.form.style);
		data.attr.onMounted = dialog.form.onMounted;
		data.attr.onChange = dialog.form.onChange;
		emits('change', data);
	}

	function deleteRow() {
		emits('delete');
	}

	// 改变内容
	function changeValue(val) {
		let data = JSON.parse(JSON.stringify(props.data));
		data.attr.text = val;
		emits('change', data);
	}

</script>

<style lang="scss" scoped>
.group-input-box {
	min-width: 50px;
	text-indent: 0;
}
</style>